<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/exer_1.css" />
	<script type="text/javascript">

		window.onload = function () {

			//创建一个"广州"节点,添加到#city下
			myClick("btn01", function () {
				//创建广州节点 <li>广州</li>
				//创建li元素节点
				/*
				 * document.createElement()
				 * 	可以用于创建一个元素节点对象，
				 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
				 * 	并将创建好的对象作为返回值返回
				 */
				var li = document.createElement("li");

				//创建广州文本节点
				/*
				 * document.createTextNode()
				 * 	可以用来创建一个文本节点对象
				 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
				 */
				var gzText = document.createTextNode("广州");

				//将gzText设置li的子节点
				/*
				 * appendChild()
				 * 	 - 向一个父节点中添加一个新的子节点
				 * 	 - 用法：父节点.appendChild(子节点);
				 */
				li.appendChild(gzText);

				//获取id为city的节点
				var city = document.getElementById("city");

				//将广州添加到city下
				city.appendChild(li);


			});

			//将"广州"节点插入到#bj前面
			myClick("btn02", function () {
				//创建一个广州
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);

				//获取id为bj的节点
				var bj = document.getElementById("bj");

				//获取city
				var city = document.getElementById("city");

				/*
				 * insertBefore()
				 * 	- 可以在指定的子节点前插入新的子节点
				 *  - 语法：
				 * 		父节点.insertBefore(新节点,旧节点);
				 */
				city.insertBefore(li, bj);


			});


			//使用"广州"节点替换#bj节点
			myClick("btn03", function () {
				//创建一个广州
				var li = document.createElement("li");
				var gzText = document.createTextNode("广州");
				li.appendChild(gzText);

				//获取id为bj的节点
				var bj = document.getElementById("bj");

				//获取city
				var city = document.getElementById("city");

				/*
				 * replaceChild()
				 * 	- 可以使用指定的子节点替换已有的子节点
				 * 	- 语法：父节点.replaceChild(新节点,旧节点);
				 */
				city.replaceChild(li, bj);


			});

			//删除#bj节点
			myClick("btn04", function () {
				//获取id为bj的节点
				var bj = document.getElementById("bj");
				//获取city
				// var city = document.getElementById("city");

				/*
				 * removeChild()
				 * 	- 可以删除一个子节点
				 * 	- 语法：父节点.removeChild(子节点);
				 * 		
				 * 		子节点.parentNode.removeChild(子节点);
				 */
				//city.removeChild(bj);

				bj.parentNode.removeChild(bj);
			});


			//读取#city内的HTML代码
			myClick("btn05", function () {
				//获取city
				var city = document.getElementById("city");

				alert(city.innerHTML);
			});

			//设置#bj内的HTML代码
			myClick("btn06", function () {
				//获取bj
				var bj = document.getElementById("bj");
				bj.innerHTML = "昌平";
			});

			myClick("btn07", function () {

				//向city中添加广州
				var city = document.getElementById("city");

				/*
				 * 使用innerHTML也可以完成DOM的增删改的相关操作
				 * 一般我们会两种方式结合使用
				 */
				//city.innerHTML += "<li>广州</li>";

				//创建一个li
				var li = document.createElement("li");
				//向li中设置文本
				li.innerHTML = "广州";
				//将li添加到city中
				city.appendChild(li);

			});


		};

		function myClick(idStr, fun) {
			var btn = document.getElementById(idStr);
			btn.onclick = fun;
		}


	</script>

</head>

<body>
	<div id="total">
		<div class="inner">
			<p>
				你喜欢哪个城市?
			</p>

			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>

		</div>
	</div>
	<div id="btnList">
		<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
		<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
		<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
		<div><button id="btn04">删除#bj节点</button></div>
		<div><button id="btn05">读取#city内的HTML代码</button></div>
		<div><button id="btn06">设置#bj内的HTML代码</button></div>
		<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
	</div>
</body>

</html>